/**
 * 顶部导航栏
 */
'use strict'
import React, {Component} from 'react';
import {Picker} from "antd-mobile";
import arrayTreeFilter from 'array-tree-filter';
import style from './PickerItem.less';

const CustomChildren = props => (
  <div onClick={props.onClick} className={style.tagContainer}>
    <div className={style.label}>{props.children}</div>
    <div className={style.input}>
      <p align="right">{props.extra}</p>
    </div>
  </div>
);


class PickerItem extends Component {
  state = {
    visible: false,
  };

  render() {
    const {value, onChange, children, data = [],cols=3} = this.props;
    const {visible} = this.state;
    return (
      <Picker
        title={children}
        extra="请选择"
        visible={visible}
        data={data}
        value={value}
        onChange={onChange}
        onOk={() => this.setState({visible: false})}
        onDismiss={() => this.setState({visible: false})}
        cols={cols}
      >
        <CustomChildren
          extra={this.getSel()}
          arrow="horizontal"
          onClick={() => this.setState({visible: true})}>
          {children}
        </CustomChildren>
      </Picker>
    );
  }

  getSel = _ => {
    const {data = []} = this.props;
    const value = this.state.pickerValue;
    if (!value) {
      return '';
    }
    const treeChildren = arrayTreeFilter(data, (c, level) => c.value === value[level]);
    return treeChildren.map(v => v.label).join(',');
  }
}

PickerItem.propTypes = {};

export default PickerItem;


